<template>
    <div class="user-manage">
        <table class="user-table">
            <thead>
                <tr>
                    <!-- 序号列 -->
                    <th>序号</th>
                    <!-- 用户名列 -->
                    <th>用户名</th>
                    <!-- 密码列 -->
                    <th>密码</th>
                    <!-- 姓名列 -->
                    <th>姓名</th>
                    <!-- 邮箱列 -->
                    <th>邮箱</th>
                    <!-- 头像列 -->
                    <th>头像</th>
                    <!-- 操作列 -->
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in tableData" :key="row.id">
                    <td>{{ row.id }}</td>
                    <td>{{ row.username }}</td>
                    <td>
                        <input
                            v-model="row.password"
                            type="password"
                            class="input-field"
                        />
                    </td>
                    <td>{{ row.name }}</td>
                    <td>{{ row.email }}</td>
                    <td>
                        <img
                            :src="row.avatar"
                            :alt="row.username"
                            class="avatar"
                            @error="handleAvatarError"
                            @click="detail(row)"
                        />
                    </td>
                    <td>
                        <button class="btn primary" @click="handleEdit(row)">
                            编辑
                        </button>
                        <button class="btn danger" @click="detail(row)">
                            详情
                        </button>
                        <button class="btn danger" @click="handleDelete(row)">
                            删除
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 编辑对话框 -->
        <div v-if="dialogVisible" class="dialog">
            <div class="dialog-header">
                <h3>编辑用户</h3>
                <button class="close-btn" @click="dialogVisible = false">
                    ×
                </button>
            </div>
            <div class="dialog-content">
                <form @submit.prevent="saveEdit">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input
                            type="text"
                            id="username"
                            v-model="editForm.username"
                            class="input-field"
                        />
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input
                            type="password"
                            id="password"
                            v-model="editForm.password"
                            class="input-field"
                        />
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input
                            type="text"
                            id="name"
                            v-model="editForm.name"
                            class="input-field"
                        />
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input
                            type="email"
                            id="email"
                            v-model="editForm.email"
                            class="input-field"
                        />
                    </div>
                    <div class="form-group">
                        <label for="avatar">头像</label>
                        <input
                            type="text"
                            id="avatar"
                            v-model="editForm.img"
                            class="input-field"
                        />
                    </div>
                    <div class="form-group">
                        <button type="button" @click="dialogVisible = false">
                            取消
                        </button>
                        <button type="submit" class="primary">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {useRouter} from "vue-router"

const router = useRouter()

const tableData = ref([]);
const dialogVisible = ref(false);
const editForm = ref({});

// 获取数据
const fetchData = async () => {
    try {
        const response = await axios.get('http://localhost:3000/users');
        tableData.value = response.data;
    } catch (error) {
        console.error('获取数据失败:', error);
        alert('获取数据失败');
    }
};

// 处理头像加载错误
const handleAvatarError = (event) => {
    event.target.src = 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png';
};

// 处理编辑
const handleEdit = (row) => {
    editForm.value = { ...row };
    dialogVisible.value = true;
};

// 保存编辑
const saveEdit = async () => {
    try {
        await axios.patch(`http://localhost:3000/users/${editForm.value.id}`, editForm.value);
        alert('更新成功');
        dialogVisible.value = false;
        fetchData();
    } catch (error) {
        console.error('更新失败:', error);
        alert('更新失败');
    }
};

// 处理删除
const handleDelete =async (row) => {
    if (confirm('确定要删除该用户吗？')) {
        try {
            await axios.delete(`http://localhost:3000/users/${row.id}`);
            alert('删除成功');
            fetchData();
        } catch (error) {
            console.error('删除失败:', error);
            alert('删除失败');
        }
    }
};
const detail=(row)=>{
  router.push({path:"/userdetail",query:{pid:row.id}})
}
onMounted(() => {
    fetchData();
});
</script>

<style scoped>
.user-manage {
    padding: 20px;
}

.user-table {
    width: 100%;
    border-collapse: collapse;
}

.user-table th,
.user-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

.user-table th {
    background-color: #f0f9eb;
}

.user-table th:hover {
    background-color: #e1f3d8;
}

.input-field {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
}

.avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.btn {
    padding: 6px 12px;
    border: none;
    cursor: pointer;
    margin: 2px;
}

.primary {
    background-color: #1890ff;
    color: white;
}

.danger {
    background-color: #ff4d4f;
    color: white;
}

.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}
</style>
